<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>【跳槽月】2月完结 | 俊劫的学习基地</title>
    <meta name="generator" content="VuePress 1.7.1">
    <link rel="icon" href="/favicon.ico">
    <meta name="description" content="俊劫的学习基地是俊劫的个人博客，用于记录学习笔记、分享音乐、书籍、旅行等个人兴趣的站点。">
    <meta name="keywords" content="俊劫,俊劫的博客,博客,个人博客,vue,vuejs,vuepress,vuepress-theme-reco">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    
    <link rel="preload" href="/assets/css/0.styles.5f3e1891.css" as="style"><link rel="preload" href="/assets/js/app.070ad525.js" as="script"><link rel="preload" href="/assets/js/2.1d15da37.js" as="script"><link rel="preload" href="/assets/js/18.e48da6e4.js" as="script"><link rel="preload" href="/assets/js/4.aab0e518.js" as="script"><link rel="prefetch" href="/assets/js/10.46adc9c3.js"><link rel="prefetch" href="/assets/js/11.4fa3a97f.js"><link rel="prefetch" href="/assets/js/12.d930e0cf.js"><link rel="prefetch" href="/assets/js/13.ac14e905.js"><link rel="prefetch" href="/assets/js/14.5db5f3a5.js"><link rel="prefetch" href="/assets/js/15.f912d397.js"><link rel="prefetch" href="/assets/js/16.dc881375.js"><link rel="prefetch" href="/assets/js/17.4b5e68db.js"><link rel="prefetch" href="/assets/js/19.4a02bf41.js"><link rel="prefetch" href="/assets/js/20.8437ea4c.js"><link rel="prefetch" href="/assets/js/21.618c8e36.js"><link rel="prefetch" href="/assets/js/22.097f8d74.js"><link rel="prefetch" href="/assets/js/23.512dda35.js"><link rel="prefetch" href="/assets/js/24.2afceb8f.js"><link rel="prefetch" href="/assets/js/25.a7a02005.js"><link rel="prefetch" href="/assets/js/26.a79e1590.js"><link rel="prefetch" href="/assets/js/27.d0feb2c1.js"><link rel="prefetch" href="/assets/js/28.62b630e3.js"><link rel="prefetch" href="/assets/js/29.119f3256.js"><link rel="prefetch" href="/assets/js/3.8b40c051.js"><link rel="prefetch" href="/assets/js/30.5b11ce87.js"><link rel="prefetch" href="/assets/js/31.94ce824a.js"><link rel="prefetch" href="/assets/js/32.ed4f7508.js"><link rel="prefetch" href="/assets/js/33.c74281cf.js"><link rel="prefetch" href="/assets/js/34.ffb262b0.js"><link rel="prefetch" href="/assets/js/35.ada11000.js"><link rel="prefetch" href="/assets/js/36.edb96889.js"><link rel="prefetch" href="/assets/js/37.02fd03c3.js"><link rel="prefetch" href="/assets/js/38.4e0ec907.js"><link rel="prefetch" href="/assets/js/39.8cd27589.js"><link rel="prefetch" href="/assets/js/40.e59f0b3b.js"><link rel="prefetch" href="/assets/js/41.e3da8313.js"><link rel="prefetch" href="/assets/js/42.c847d1f4.js"><link rel="prefetch" href="/assets/js/43.13c84445.js"><link rel="prefetch" href="/assets/js/44.cbaa9acf.js"><link rel="prefetch" href="/assets/js/45.cb3a266d.js"><link rel="prefetch" href="/assets/js/46.0519c642.js"><link rel="prefetch" href="/assets/js/47.3373a57e.js"><link rel="prefetch" href="/assets/js/48.7efa5760.js"><link rel="prefetch" href="/assets/js/49.923721c8.js"><link rel="prefetch" href="/assets/js/5.07f41da3.js"><link rel="prefetch" href="/assets/js/50.839ac91d.js"><link rel="prefetch" href="/assets/js/51.f98cecb2.js"><link rel="prefetch" href="/assets/js/52.041f20b3.js"><link rel="prefetch" href="/assets/js/53.9464df60.js"><link rel="prefetch" href="/assets/js/54.a9ce67d2.js"><link rel="prefetch" href="/assets/js/55.9733d4b3.js"><link rel="prefetch" href="/assets/js/56.e67c1aa1.js"><link rel="prefetch" href="/assets/js/57.1335a8a7.js"><link rel="prefetch" href="/assets/js/58.83f617d8.js"><link rel="prefetch" href="/assets/js/59.b74c2845.js"><link rel="prefetch" href="/assets/js/6.dcf50b6e.js"><link rel="prefetch" href="/assets/js/60.6e3b00bd.js"><link rel="prefetch" href="/assets/js/61.cd335db9.js"><link rel="prefetch" href="/assets/js/62.ee277d48.js"><link rel="prefetch" href="/assets/js/63.2a34cfa5.js"><link rel="prefetch" href="/assets/js/64.a51989fe.js"><link rel="prefetch" href="/assets/js/65.3abfaea5.js"><link rel="prefetch" href="/assets/js/66.d4f35c55.js"><link rel="prefetch" href="/assets/js/67.2f070f74.js"><link rel="prefetch" href="/assets/js/68.c7da856f.js"><link rel="prefetch" href="/assets/js/69.6c15fcd4.js"><link rel="prefetch" href="/assets/js/7.10c46d97.js"><link rel="prefetch" href="/assets/js/70.68b6cf93.js"><link rel="prefetch" href="/assets/js/71.c49db210.js"><link rel="prefetch" href="/assets/js/72.7ffae8af.js"><link rel="prefetch" href="/assets/js/73.abb40ede.js"><link rel="prefetch" href="/assets/js/74.71723883.js"><link rel="prefetch" href="/assets/js/75.ab7e2e75.js"><link rel="prefetch" href="/assets/js/76.936112a6.js"><link rel="prefetch" href="/assets/js/8.ec9c3735.js"><link rel="prefetch" href="/assets/js/9.b555605d.js">
    <link rel="stylesheet" href="/assets/css/0.styles.5f3e1891.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container have-rightmenu" data-v-f848d4e8><div class="global-loading-wrapper" data-v-2c41f3eb data-v-f848d4e8 data-v-f848d4e8><div class="loader-main" data-v-2c41f3eb><img src="/assets/img/loading.a592e2e5.jpg" alt="loading" data-v-2c41f3eb></div></div> <div class="hide" data-v-f848d4e8><header class="navbar" data-v-f848d4e8><div title="目录" class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><img src="/img/logo.png" alt="俊劫的学习基地" class="logo"> <span class="site-name">俊劫的学习基地</span></a> <div class="links"><div class="color-picker"><a class="color-button"><i class="iconfont reco-color"></i></a> <div class="color-picker-menu" style="display:none;"><div class="mode-options"><h4 class="title">选择模式</h4> <ul class="color-mode-options"><li class="dark">深色模式</li><li class="light active">浅色模式</li><li class="read">阅读模式</li></ul></div></div></div> <div class="search-box"><i class="iconfont reco-search"></i> <input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <ul class="suggestions" style="display:none;"></ul></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/" class="nav-link"><i class="iconfont reco-home"></i>首页
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i></i>前端
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>文档教程</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/web/docs/imooc/wiki/" class="nav-link"><i class="iconfont reco-blog"></i>慕课教程
</a></li><li class="dropdown-subitem"><a href="/web/docs/es6/" class="nav-link"><i class="iconfont reco-blog"></i>ES6 入门教程
</a></li><li class="dropdown-subitem"><a href="/web/docs/wangdoc/javascript/" class="nav-link"><i class="iconfont reco-blog"></i>网道-JavaScript 教程
</a></li><li class="dropdown-subitem"><a href="/web/docs/angular/" class="nav-link"><i class="iconfont reco-blog"></i>Angular 文档
</a></li><li class="dropdown-subitem"><a href="/web/docs/react/" class="nav-link"><i class="iconfont reco-blog"></i>React 文档
</a></li><li class="dropdown-subitem"><a href="/web/docs/vue/" class="nav-link"><i class="iconfont reco-blog"></i>Vue 文档
</a></li><li class="dropdown-subitem"><a href="/web/docs/node/" class="nav-link"><i class="iconfont reco-blog"></i>Node 文档
</a></li><li class="dropdown-subitem"><a href="/web/docs/babel/" class="nav-link"><i class="iconfont reco-blog"></i>Babel 文档
</a></li><li class="dropdown-subitem"><a href="/web/docs/webpack/" class="nav-link"><i class="iconfont reco-blog"></i>Webpack 文档
</a></li><li class="dropdown-subitem"><a href="/web/docs/typescript/" class="nav-link"><i class="iconfont reco-blog"></i>TypeScript 文档
</a></li><li class="dropdown-subitem"><a href="/web/docs/runoob/" class="nav-link"><i class="iconfont reco-blog"></i>菜鸟教程
</a></li><li class="dropdown-subitem"><a href="/web/docs/docschina/" class="nav-link"><i class="iconfont reco-blog"></i>印记中文
</a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-api"></i>索引
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/categories/" class="nav-link"><i class="iconfont reco-category"></i>分类
</a></li><li class="dropdown-item"><!----> <a href="/tags/" class="nav-link"><i class="iconfont reco-tag"></i>标签
</a></li><li class="dropdown-item"><!----> <a href="/archives/" class="nav-link"><i class="iconfont reco-date"></i>归档
</a></li></ul></div></div><div class="nav-item"><a href="/bookshop/message-board/" class="nav-link"><i class="iconfont reco-suggestion"></i>留言板
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-message"></i>关于
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>联系</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://github.com/alexwjj" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-github"></i>GitHub
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="/bookshop/linkme/" class="nav-link"><i class="iconfont reco-account"></i>关于我
</a></li></ul></li><li class="dropdown-item"><h4>博客</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://github.com/alexwjj/alexwjj.github.io" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-document"></i>本站源码
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://alexwjj.github.io/old-blog" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-document"></i>老版博客
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li><li class="dropdown-item"><h4>其他</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/bookshop/friendslink/" class="nav-link"><i class="iconfont reco-friend"></i>友情链接
</a></li></ul></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask" data-v-f848d4e8></div> <aside class="sidebar" data-v-f848d4e8><div class="personal-info-wrapper" data-v-34faaed8 data-v-f848d4e8><img src="/img/logo.png" alt="author-avatar" class="personal-img" data-v-34faaed8> <div class="author" data-v-34faaed8>
    俊劫
  </div> <div class="personal-info-details" data-v-34faaed8><div data-v-34faaed8>文章：<span data-v-34faaed8>54</span></div> <div data-v-34faaed8>地点：<span data-v-34faaed8>canton</span></div></div> <div class="slogan" data-v-34faaed8>
    just do it
  </div> <!----></div> <nav class="nav-links"><div class="nav-item"><a href="/" class="nav-link"><i class="iconfont reco-home"></i>首页
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i></i>前端
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>文档教程</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/web/docs/imooc/wiki/" class="nav-link"><i class="iconfont reco-blog"></i>慕课教程
</a></li><li class="dropdown-subitem"><a href="/web/docs/es6/" class="nav-link"><i class="iconfont reco-blog"></i>ES6 入门教程
</a></li><li class="dropdown-subitem"><a href="/web/docs/wangdoc/javascript/" class="nav-link"><i class="iconfont reco-blog"></i>网道-JavaScript 教程
</a></li><li class="dropdown-subitem"><a href="/web/docs/angular/" class="nav-link"><i class="iconfont reco-blog"></i>Angular 文档
</a></li><li class="dropdown-subitem"><a href="/web/docs/react/" class="nav-link"><i class="iconfont reco-blog"></i>React 文档
</a></li><li class="dropdown-subitem"><a href="/web/docs/vue/" class="nav-link"><i class="iconfont reco-blog"></i>Vue 文档
</a></li><li class="dropdown-subitem"><a href="/web/docs/node/" class="nav-link"><i class="iconfont reco-blog"></i>Node 文档
</a></li><li class="dropdown-subitem"><a href="/web/docs/babel/" class="nav-link"><i class="iconfont reco-blog"></i>Babel 文档
</a></li><li class="dropdown-subitem"><a href="/web/docs/webpack/" class="nav-link"><i class="iconfont reco-blog"></i>Webpack 文档
</a></li><li class="dropdown-subitem"><a href="/web/docs/typescript/" class="nav-link"><i class="iconfont reco-blog"></i>TypeScript 文档
</a></li><li class="dropdown-subitem"><a href="/web/docs/runoob/" class="nav-link"><i class="iconfont reco-blog"></i>菜鸟教程
</a></li><li class="dropdown-subitem"><a href="/web/docs/docschina/" class="nav-link"><i class="iconfont reco-blog"></i>印记中文
</a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-api"></i>索引
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/categories/" class="nav-link"><i class="iconfont reco-category"></i>分类
</a></li><li class="dropdown-item"><!----> <a href="/tags/" class="nav-link"><i class="iconfont reco-tag"></i>标签
</a></li><li class="dropdown-item"><!----> <a href="/archives/" class="nav-link"><i class="iconfont reco-date"></i>归档
</a></li></ul></div></div><div class="nav-item"><a href="/bookshop/message-board/" class="nav-link"><i class="iconfont reco-suggestion"></i>留言板
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-message"></i>关于
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>联系</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://github.com/alexwjj" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-github"></i>GitHub
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="/bookshop/linkme/" class="nav-link"><i class="iconfont reco-account"></i>关于我
</a></li></ul></li><li class="dropdown-item"><h4>博客</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://github.com/alexwjj/alexwjj.github.io" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-document"></i>本站源码
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://alexwjj.github.io/old-blog" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-document"></i>老版博客
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li><li class="dropdown-item"><h4>其他</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/bookshop/friendslink/" class="nav-link"><i class="iconfont reco-friend"></i>友情链接
</a></li></ul></li></ul></div></div> <!----></nav> <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>2021-算法</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>2021-1</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>2021-2</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/pages/98a7a4ab3b308/" aria-current="page" class="active sidebar-link">【跳槽月】2月完结</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>2021-3</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>2021-4</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>2021-5</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <div><main class="page"><div class="theme-vdoing-wrapper bg-style-5"><div class="articleInfo-wrap" data-v-13f19dad><div class="articleInfo" data-v-13f19dad><ul class="breadcrumbs" data-v-13f19dad><li data-v-13f19dad><a href="/" title="首页" class="fa fa-laptop-house router-link-active" data-v-13f19dad></a></li> <li data-v-13f19dad><a href="/categories/?category=%E5%AD%A6%E4%B9%A0%E6%89%93%E5%8D%A1" title="分类" data-v-13f19dad>学习打卡</a></li> <li data-v-13f19dad><a href="/categories/?category=2021-2" title="分类" data-v-13f19dad>2021-2</a></li> <!----></ul> <div class="info" data-v-13f19dad><div title="作者" class="author fa fa-user" data-v-13f19dad><a href="javascript:;" data-v-13f19dad>俊劫</a></div> <div title="创建时间" class="date fa fa-calendar-alt" data-v-13f19dad><a href="javascript:;" data-v-13f19dad>2021/02/28 00:00:00</a></div> <!----></div></div></div> <!----> <div class="content-wrapper"><div class="right-menu-wrapper"><div class="right-menu-margin"><div class="right-menu-content"></div></div></div> <h1><img src="">
            【跳槽月】2月完结
          </h1> <div class="theme-vdoing-content content__default"><blockquote><p>跳槽月：把自己当做 30 岁来活，30 岁的自己会感谢 24 岁的你，加油 🆙</p></blockquote> <h2 id="_2-28"><a href="#_2-28" class="header-anchor">#</a> 2.28</h2> <h3 id="ts学习"><a href="#ts学习" class="header-anchor">#</a> ts学习</h3> <h3 id="类型判断"><a href="#类型判断" class="header-anchor">#</a> 类型判断</h3> <ul><li>typeof 基本类型， 注意 null 返回 object，因为 null 是 000000，object 前几位也全是 0</li> <li>instanceof 原型链判断, 可以准确地判断复杂引用数据类型，但是不能正确判断基础数据类型。比如通过 new String 出来的字符串和直接写的字符串''</li> <li>Object.prototype.toString, 最准确。甚至可以把 document 和 window 都区分开来。</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token class-name">Object</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>document<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//&quot;[object HTMLDocument]&quot;</span>
<span class="token class-name">Object</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>window<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//&quot;[object Window]&quot;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h2 id="_2-27"><a href="#_2-27" class="header-anchor">#</a> 2.27</h2> <p>找房子去了，和各个前端大佬聚了一波。</p> <h2 id="_2-26"><a href="#_2-26" class="header-anchor">#</a> 2.26</h2> <h3 id="ts学习-2"><a href="#ts学习-2" class="header-anchor">#</a> ts学习</h3> <h2 id="_2-25"><a href="#_2-25" class="header-anchor">#</a> 2.25</h2> <h3 id="工作交接"><a href="#工作交接" class="header-anchor">#</a> 工作交接</h3> <p>很尴尬的是，都没人想接</p> <h3 id="实习生面试"><a href="#实习生面试" class="header-anchor">#</a> 实习生面试</h3> <p>感觉妹子和我有一拼，答非所问，罗里吧嗦。。。。</p> <h2 id="_2-24"><a href="#_2-24" class="header-anchor">#</a> 2.24</h2> <h3 id="react-render中跳转"><a href="#react-render中跳转" class="header-anchor">#</a> react render中跳转</h3> <p><code>&lt;Redirect to='/login'&gt;&lt;/Redirect&gt;</code></p> <h3 id="项目完成首页布局搭建"><a href="#项目完成首页布局搭建" class="header-anchor">#</a> 项目完成首页布局搭建</h3> <p>慢慢的感觉react还是很香的</p> <h3 id="工作交接-2"><a href="#工作交接-2" class="header-anchor">#</a> 工作交接</h3> <p>公司的hp笔记本重置交回去了，24寸1080显示器也还回去了。接下来就用ipad的随航了</p> <p>谁都没想到，公司居然把我背了近三年的书包要回去了，hhh，nbplus</p> <h2 id="_2-23"><a href="#_2-23" class="header-anchor">#</a> 2.23</h2> <h3 id="学习react-hooks"><a href="#学习react-hooks" class="header-anchor">#</a> 学习react hooks</h3> <p>总结性的单独拉一篇，不能都在日记写，日记写总结性东西。先了解下，等写多了再深入</p> <ul><li>useState, 创建与修改变量</li> <li>useEffect， 监听某些变量，类似与vue watch</li> <li>useContext，创建上下文，可以用于传值，类似与vue provide和inject</li> <li>useReducer，状态管理，state和reducer，通过dispatch触发对应的修改，和vuex相似</li> <li>useCallback，类似与函数柯里化，返回带有缓存的函数，依赖项发生变化才触发</li> <li>useMemo 和上一个相同，不过做了优化</li> <li>useRef 获取dom，不过可以变化的那种</li></ul> <h3 id="项目练习"><a href="#项目练习" class="header-anchor">#</a> 项目练习</h3> <p>zent和antd写法不同，先练习下</p> <h2 id="_2-22"><a href="#_2-22" class="header-anchor">#</a> 2.22</h2> <h3 id="react-zent"><a href="#react-zent" class="header-anchor">#</a> react + zent</h3> <p>项目搭建，写了个登录页面。写的时候磕磕碰碰，之前学的 react，忘的差不多了，晚上复习一波；</p> <h3 id="react-引入图片"><a href="#react-引入图片" class="header-anchor">#</a> react 引入图片</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">import</span> imgURL <span class="token keyword">from</span> <span class="token string">'./../images/photo.png'</span><span class="token punctuation">;</span>
<span class="token operator">&lt;</span>img src<span class="token operator">=</span><span class="token punctuation">{</span>imgURL <span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
<span class="token comment">// 或者</span>
<span class="token operator">&lt;</span>img src<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./../images/photo.png'</span><span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h3 id="created-react-app"><a href="#created-react-app" class="header-anchor">#</a> created-react-app</h3> <ul><li>创建 ts 应用： <code>npx create-react-app appName --template typescript</code></li> <li>暴露默认配置(不可逆)：<code>npm run eject</code></li> <li>默认支持 scss，less 需要按照 scss 的配置加一下</li></ul> <h3 id="react-router-配置"><a href="#react-router-配置" class="header-anchor">#</a> react-router 配置</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> BrowserRouter<span class="token punctuation">,</span> Route<span class="token punctuation">,</span> Switch <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;react-router-dom&quot;</span><span class="token punctuation">;</span>

<span class="token keyword">class</span> <span class="token class-name">App</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">(</span>
      <span class="token operator">&lt;</span>BrowserRouter<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>Switch<span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span>Route path<span class="token operator">=</span><span class="token string">&quot;/&quot;</span> component<span class="token operator">=</span><span class="token punctuation">{</span>Login<span class="token punctuation">}</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>Route<span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span>Route path<span class="token operator">=</span><span class="token string">&quot;/login&quot;</span> component<span class="token operator">=</span><span class="token punctuation">{</span>Login<span class="token punctuation">}</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>Route<span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span>Route path<span class="token operator">=</span><span class="token string">&quot;/home&quot;</span> component<span class="token operator">=</span><span class="token punctuation">{</span>Home<span class="token punctuation">}</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>Route<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span><span class="token operator">/</span>Switch<span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span><span class="token operator">/</span>BrowserRouter<span class="token operator">&gt;</span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><h3 id="react-router-跳转"><a href="#react-router-跳转" class="header-anchor">#</a> react-router 跳转</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> useHistory <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;react-router-dom&quot;</span><span class="token punctuation">;</span>

<span class="token keyword">function</span> <span class="token function">HomeButton</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">let</span> history <span class="token operator">=</span> <span class="token function">useHistory</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token keyword">function</span> <span class="token function">handleClick</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    history<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token string">&quot;/home&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token keyword">return</span> <span class="token punctuation">(</span>
    <span class="token operator">&lt;</span>button type<span class="token operator">=</span><span class="token string">&quot;button&quot;</span> onClick<span class="token operator">=</span><span class="token punctuation">{</span>handleClick<span class="token punctuation">}</span><span class="token operator">&gt;</span>
      Go home
    <span class="token operator">&lt;</span><span class="token operator">/</span>button<span class="token operator">&gt;</span>
  <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><h2 id="_2-21"><a href="#_2-21" class="header-anchor">#</a> 2.21</h2> <p>早上十点到杭州，下午睡了一觉，晚上出去逛了一趟~~~， 没了</p> <h2 id="_2-20"><a href="#_2-20" class="header-anchor">#</a> 2.20</h2> <h3 id="回杭州"><a href="#回杭州" class="header-anchor">#</a> 回杭州</h3> <h3 id="react-学习"><a href="#react-学习" class="header-anchor">#</a> react 学习</h3> <h2 id="_2-19"><a href="#_2-19" class="header-anchor">#</a> 2.19</h2> <h3 id="交接文档梳理"><a href="#交接文档梳理" class="header-anchor">#</a> 交接文档梳理</h3> <p><a href="https://note.youdao.com/ynoteshare1/index.html?id=1bf2959690d406e854c2d5dfd8fa69c3&amp;type=notebook" target="_blank" rel="noopener noreferrer">交接文档梳理<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h3 id="react"><a href="#react" class="header-anchor">#</a> react</h3> <h2 id="_2-18"><a href="#_2-18" class="header-anchor">#</a> 2.18</h2> <h3 id="爷爷最后一场事-办完就结束了"><a href="#爷爷最后一场事-办完就结束了" class="header-anchor">#</a> 爷爷最后一场事，办完就结束了</h3> <h2 id="_2-17"><a href="#_2-17" class="header-anchor">#</a> 2.17</h2> <h3 id="js-类"><a href="#js-类" class="header-anchor">#</a> js 类</h3> <ul><li>构造器 constructor，不是必须的</li> <li>如果 A 类继承了 B 类,且 A 类中写了构造器 constructor,那么 A 的构造器中 super 必写，不然报错</li> <li>类定义的方法都是放在原型链上的，继承也是借助原型链查找实现的。可在子类中重写方法，原型链查找不会找到父类的方法，达到覆盖的目的</li></ul> <h3 id="有赞面经"><a href="#有赞面经" class="header-anchor">#</a> 有赞面经</h3> <p>终于写完了，hhh。明天忙家里事情了，加油！！！！</p> <h2 id="_2-13-2-16"><a href="#_2-13-2-16" class="header-anchor">#</a> 2.13 - 2.16</h2> <ul><li>2.13 约了朋友去宋城玩，本来晚上 7 点的演出。4 点接到爷爷病危的通知，就感觉回家了，晚上九点多的火车</li> <li>2.14 弟弟开车来火车站接我，早上六点多到家，开始处理后事。</li> <li>2.15 守夜</li> <li>2.16 出棺，晚上早点回来了写了写交接文档。</li></ul> <h2 id="_2-12"><a href="#_2-12" class="header-anchor">#</a> 2.12</h2> <h3 id="面经总结"><a href="#面经总结" class="header-anchor">#</a> 面经总结</h3> <p>主要听之前的录音，做了部分面经总结，明天晚上继续。白天去宋城逛逛</p> <h3 id="学习计划"><a href="#学习计划" class="header-anchor">#</a> 学习计划</h3> <p>分配的部门应该是 toB，用 react，得好好练习下</p> <p>准备用 React + TS + Zent（有赞 reactUI 库）+ Zan-Proxy（提前熟悉下） 做做项目</p> <h2 id="_2-11-除夕"><a href="#_2-11-除夕" class="header-anchor">#</a> 2.11 （除夕）</h2> <p>领导同意了离职，确认了时间</p> <p>没学习，没回老家，和女朋友玩了一天</p> <h2 id="_2-10"><a href="#_2-10" class="header-anchor">#</a> 2.10</h2> <h3 id="浏览器的并发请求限制-为什么"><a href="#浏览器的并发请求限制-为什么" class="header-anchor">#</a> 浏览器的并发请求限制？为什么</h3> <ul><li>浏览器的并发请求数目限制是针对同一域名的，如果想要突破这个限制，换成不同域名即可。比如图片资源放在不同的域名下</li> <li>如果不限制，多个请求一起发，线程开销比较大</li> <li>服务器接收多个请求可能也会有性能问题，尽管可以负载均衡
参考文章：<a href="https://cloud.tencent.com/developer/article/1683127" target="_blank" rel="noopener noreferrer">浏览器同域名请求的最大并发数限制<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <h3 id="浏览器-http-请求的并发性是如何体现的-并发请求的数量有没有限制"><a href="#浏览器-http-请求的并发性是如何体现的-并发请求的数量有没有限制" class="header-anchor">#</a> 浏览器 http 请求的并发性是如何体现的？并发请求的数量有没有限制？</h3> <ul><li><p>页面资源请求时，浏览器会同时和服务器建立多个 TCP 连接，在同一个 TCP 连接上顺序处理多个 HTTP 请求。所以浏览器的并发性就体现在可以建立多个 TCP 连接，来支持多个 http 同时请求。</p></li> <li><p>Chrome 浏览器最多允许对同一个域名 Host 建立 6 个 TCP 连接，不同的浏览器有所区别。</p></li></ul> <h3 id="一个-tcp-连接可以同时发送几个-http-请求"><a href="#一个-tcp-连接可以同时发送几个-http-请求" class="header-anchor">#</a> 一个 TCP 连接可以同时发送几个 HTTP 请求？</h3> <ul><li>HTTP/1.1 中，单个 TCP 连接，在同一时间只能处理一个 http 请求，虽然存在 Pipelining 技术支持多个请求同时发送，但由于实践中存在很多问题无法解决，所以浏览器默认是关闭，所以可以认为是不支持同时多个请求。</li> <li>HTTP2 提供了多路传输功能，多个 http 请求，可以同时在同一个 TCP 连接中进行传输。</li></ul> <h3 id="二叉树的几种遍历"><a href="#二叉树的几种遍历" class="header-anchor">#</a> 二叉树的几种遍历</h3> <ul><li>前序遍历：先访问根节点——左子树——右子树</li> <li>中序遍历：先左子树——根节点——右子树</li> <li>后序遍历：先左子树——右子树——根节点</li></ul> <h3 id="基础排序"><a href="#基础排序" class="header-anchor">#</a> 基础排序</h3> <ul><li>冒泡排序：双层遍历，对比前后两个节点，如果满足条件，位置互换，直到遍历结束。</li> <li>快速排序：去数组中间的那一个数，然后遍历所有数，小于该数的 push 到一个数组，大于该数的 push 到另外一个数组，然后递归去排序这两个数组，最后将所有结果连接起来。</li> <li>选择排序：声明一个数组，每次去输入数组里面找数组中的最大值或者最小值，取出来后 push 到声明的数组中，直到输入数组为空。</li></ul> <h2 id="_2-9"><a href="#_2-9" class="header-anchor">#</a> 2.9</h2> <h3 id="git-rebase"><a href="#git-rebase" class="header-anchor">#</a> git rebase</h3> <ul><li>合并多次 commit 记录<code>git rebase -i HEAD~4</code> 注意不要合并先前提交的东西，也就是已经提交远程分支的纪录</li> <li>合并分支 <code>git rebase master</code>,相比较<code>git merge master</code> 会去除一些 merge 记录，分支记录更干净</li> <li><code>git rebase —abort</code> 分支会回到 rebase 开始前的状态</li> <li>将某一段 commit 粘贴到另一个分支上 <code>git rebase [startpoint] [endpoint] --onto [branchName]</code></li> <li>git rebase 是一个危险命令,可能会丢失记录</li> <li><code>git-rebase</code> 存在的价值是：对一个分支做「变基」操作</li></ul> <h3 id="nginx-负载均衡策略"><a href="#nginx-负载均衡策略" class="header-anchor">#</a> nginx 负载均衡策略</h3> <ul><li>轮询(默认)</li> <li>权重 weight</li> <li>ip_hash( IP 绑定)</li> <li>fair(第三方插件)</li> <li>url_hash(第三方插件)</li></ul> <h2 id="_2-8"><a href="#_2-8" class="header-anchor">#</a> 2.8</h2> <h3 id="vue3-的一些变化"><a href="#vue3-的一些变化" class="header-anchor">#</a> vue3 的一些变化</h3> <ul><li>原来是通过 new Vue 的方法来初始化 Vue，在 Vue3.0 中，修改为了通过 createApp 的方式 <code>createApp(App).mount('#app')</code></li> <li>vite 冷启动技术无敌，利用浏览器原生属性 type='module',真正的按需编译</li> <li>生命周期变化: setup(props, context)代替 beforeCreate 和 created,其他生命周期都加了前缀 on, destroyed 换成了 onUnmounted</li> <li>很多写法和 react 相似</li></ul> <h4 id="vue-router"><a href="#vue-router" class="header-anchor">#</a> vue router</h4> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createRouter<span class="token punctuation">,</span> createWebHashHistory <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;vue-router&quot;</span><span class="token punctuation">;</span>
<span class="token comment">// 在 Vue-router新版本中，需要使用createRouter来创建路由</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">createRouter</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token comment">// 指定路由的模式,此处使用的是hash模式</span>
  history<span class="token operator">:</span> <span class="token function">createWebHashHistory</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
  <span class="token comment">// 路由地址</span>
  routes<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h3 id="vuex"><a href="#vuex" class="header-anchor">#</a> vueX</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createStore <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;vuex&quot;</span><span class="token punctuation">;</span>

<span class="token keyword">interface</span> <span class="token class-name">State</span> <span class="token punctuation">{</span>
  userName<span class="token operator">:</span> string<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">createStore</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token function">state</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> State <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      userName<span class="token operator">:</span> <span class="token string">&quot;俊劫&quot;</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><p>参考文章：<a href="https://segmentfault.com/a/1190000023737670" target="_blank" rel="noopener noreferrer">学习 Vue3.0，先从搭建环境开始<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h3 id="sum-2-3-实现-sum-2-3-的效果"><a href="#sum-2-3-实现-sum-2-3-的效果" class="header-anchor">#</a> sum(2, 3)实现 sum(2)(3)的效果</h3> <p>1、闭包，无法处理 sum(2)(3)(4)</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">sum</span><span class="token punctuation">(</span><span class="token parameter">x</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">let</span> res <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
  res <span class="token operator">=</span> res <span class="token operator">+</span> x<span class="token punctuation">;</span>
  <span class="token keyword">return</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">y</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    res <span class="token operator">=</span> res <span class="token operator">+</span> y<span class="token punctuation">;</span>
    <span class="token keyword">return</span> res<span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">sum</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 5</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p>2、利用 arguments，判断参数输入，如果没有参数输入的话，就返回总和，而不是返回函数。确定需要执行空（）</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">sum</span><span class="token punctuation">(</span><span class="token parameter">x</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">let</span> res <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
  res <span class="token operator">=</span> res <span class="token operator">+</span> x<span class="token punctuation">;</span>
  <span class="token keyword">return</span> <span class="token keyword">function</span> <span class="token function">temp</span><span class="token punctuation">(</span><span class="token parameter">y</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>arguments<span class="token punctuation">.</span>length <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> res<span class="token punctuation">;</span>
    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
      res <span class="token operator">=</span> res <span class="token operator">+</span> y<span class="token punctuation">;</span>
      <span class="token keyword">return</span> temp<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">sum</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><p>3、重写 sum 函数的 toString 和 valueOf 方法</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">sum</span><span class="token punctuation">(</span><span class="token parameter">x</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">let</span> res <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
  res <span class="token operator">=</span> res <span class="token operator">+</span> x<span class="token punctuation">;</span>
  <span class="token keyword">var</span> <span class="token function-variable function">temp</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">y</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    res <span class="token operator">=</span> res <span class="token operator">+</span> y<span class="token punctuation">;</span>
    <span class="token keyword">return</span> temp<span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
  temp<span class="token punctuation">.</span>toString <span class="token operator">=</span> temp<span class="token punctuation">.</span><span class="token function-variable function">valueOf</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> res<span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token keyword">return</span> temp<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">sum</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 6</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><h2 id="_2-7"><a href="#_2-7" class="header-anchor">#</a> 2.7</h2> <h3 id="post-put-和-patch-的区别"><a href="#post-put-和-patch-的区别" class="header-anchor">#</a> POST,PUT 和 PATCH 的区别</h3> <p>POST 和 PUT 的区别容易被简单地误认为“POST 表示创建资源，PUT 表示更新资源.但实际上两者都可以用来创建或是更新数据.单从技术上来说,他们并没有什么区别.</p> <p>POST 是非幂等的,多次调用会产生不同的结果</p> <p>PUT 是幂等的,调用一次和 N 次对系统产生的副作用是相同的</p> <p>PATCH 一般是用来局部更新资源的</p> <h3 id="暂时性死区"><a href="#暂时性死区" class="header-anchor">#</a> 暂时性死区</h3> <ul><li>ES6 规定，let/const 命令会使区块形成封闭的作用域。若在声明之前使用变量，就会报错。</li> <li>总之，在代码块内，使用 let 命令声明变量之前，该变量都是不可用的。</li> <li>这在语法上，称为 “暂时性死区”（ temporal dead zone，简称 TDZ）。</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> num <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  num <span class="token operator">=</span> <span class="token string">&quot;a&quot;</span><span class="token punctuation">;</span> <span class="token comment">// Error: Uncaught ReferenceError: num is not defined</span>
  <span class="token keyword">let</span> num<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>因为在 if 中声明了一个局部变量 num , 导致暂时性死区，if 里的 num 则与这个块级作用域绑定，不再受全局变量 num 影响，同时 let 不存在变量提升，所以在 let 前赋值的 num 是非法的。const 与之同理。</p> <h3 id="浅拷贝"><a href="#浅拷贝" class="header-anchor">#</a> 浅拷贝</h3> <ul><li>object.assign</li> <li>扩展运算符方式</li> <li>concat 拷贝数组</li> <li>arr.slice() 拷贝数组</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> target <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token keyword">let</span> source <span class="token operator">=</span> <span class="token punctuation">{</span> a<span class="token operator">:</span> <span class="token punctuation">{</span> b<span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>

Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span>target<span class="token punctuation">,</span> source<span class="token punctuation">)</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>target<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// { a: { b: 5 } };</span>
<span class="token comment">// 修改已有属性会相互影响</span>
source<span class="token punctuation">.</span>a<span class="token punctuation">.</span>b <span class="token operator">=</span> <span class="token number">5</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>source<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// { a: { b: 5 } ,c: 1};</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>target<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// { a: { b: 5 } };‘</span>
<span class="token comment">// 增加属性互补影响</span>
source<span class="token punctuation">.</span>c <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>source<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// { a: { b: 5 } ,c: 1};</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>target<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// { a: { b: 5 } };</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><h3 id="js-高精度-计时器"><a href="#js-高精度-计时器" class="header-anchor">#</a> JS 高精度  计时器</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> start <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> count <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>

<span class="token comment">//占用线程事件</span>
<span class="token function">setInterval</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">var</span> j <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
  <span class="token keyword">while</span> <span class="token punctuation">(</span>j<span class="token operator">++</span> <span class="token operator">&lt;</span> <span class="token number">100000000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">//定时器测试</span>
<span class="token function">setInterval</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  count<span class="token operator">++</span><span class="token punctuation">;</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token punctuation">(</span>start <span class="token operator">+</span> count <span class="token operator">*</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><p>由于加了很占线程的阻塞事件，导致定时器事件每次执行延迟越来越严重,实际输出 200 - 3000 不等.</p> <p>由于实际项目中，执行计时器的同时，会有很多其他异步阻塞事件，会导致倒计时功能不精确。</p> <p>解决思路：通过引入计数器，判断计时器延迟执行的时间来调整，尽量让误差缩小，不同浏览器不同时间段打开页面倒计时误差可控制在 1s 以内。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> start <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
  time <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">,</span>
  elapsed <span class="token operator">=</span> <span class="token string">&quot;0.0&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">instance</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  time <span class="token operator">+=</span> <span class="token number">100</span><span class="token punctuation">;</span>
  elapsed <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span>time <span class="token operator">/</span> <span class="token number">100</span><span class="token punctuation">)</span> <span class="token operator">/</span> <span class="token number">10</span><span class="token punctuation">;</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">round</span><span class="token punctuation">(</span>elapsed<span class="token punctuation">)</span> <span class="token operator">==</span> elapsed<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    elapsed <span class="token operator">+=</span> <span class="token string">&quot;.0&quot;</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  document<span class="token punctuation">.</span>title <span class="token operator">=</span> elapsed<span class="token punctuation">;</span>
  <span class="token keyword">var</span> diff <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">-</span> start <span class="token operator">-</span> time<span class="token punctuation">;</span>
  window<span class="token punctuation">.</span><span class="token function">setTimeout</span><span class="token punctuation">(</span>instance<span class="token punctuation">,</span> <span class="token number">100</span> <span class="token operator">-</span> diff<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
window<span class="token punctuation">.</span><span class="token function">setTimeout</span><span class="token punctuation">(</span>instance<span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><p>参考文章：</p> <ul><li><a href="https://cloud.tencent.com/developer/ask/69743" target="_blank" rel="noopener noreferrer">Javascript 计时器<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://www.xuanfengge.com/js-realizes-precise-countdown.html" target="_blank" rel="noopener noreferrer">JS 实现活动精确倒计时<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <h2 id="_2-6"><a href="#_2-6" class="header-anchor">#</a> 2.6</h2> <p>买了门课， 【JavaScript 核心原理精讲】看一波</p> <h3 id="http-协议中-301-和-302-的区别"><a href="#http-协议中-301-和-302-的区别" class="header-anchor">#</a> http 协议中 301 和 302 的区别</h3> <ul><li>301 代表资源的永久重定向，302 代表资源的临时重定向</li> <li>很多的第三方授权，授权过后的回跳地址经常会使用 301 形式，改变浏览器的回跳地址。</li></ul> <h3 id="单个-input-enter-会刷新页面"><a href="#单个-input-enter-会刷新页面" class="header-anchor">#</a> 单个 input enter 会刷新页面</h3> <ul><li>写一个隐藏的 input</li> <li>el-form @submit.native.prevent</li> <li>屏蔽回车键，比较 low</li></ul> <h3 id="正则表达式符号-老是忘"><a href="#正则表达式符号-老是忘" class="header-anchor">#</a> 正则表达式符号，老是忘</h3> <ul><li>^以什么为开始</li> <li>\s 匹配任意的空白符</li> <li>_只匹配出现 0 次及以上 _ 前的字符</li> <li>()分组 []匹配方括号内的任意字符</li> <li>?之前字符可选</li> <li>\d 匹配数字</li> <li>+只匹配出现 1 次及以上 + 前的字符 .匹配任意字符除了换行符和回车符(贪婪匹配)</li></ul> <h2 id="_2-5"><a href="#_2-5" class="header-anchor">#</a> 2.5</h2> <h3 id="lodash-get-实现"><a href="#lodash-get-实现" class="header-anchor">#</a> lodash _get()实现</h3> <p>访问 a.b.c.d.e 报错处理，最新的语法可以写：a?.b?.c?.d?.e 来访问,但是语义不明确，兼容性要求较高。</p> <p>使用 lodash get 较好</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">get</span><span class="token punctuation">(</span><span class="token parameter">source<span class="token punctuation">,</span> path<span class="token punctuation">,</span> defaultValue</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> paths <span class="token operator">=</span> path<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\[(\d+)\]</span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span><span class="token punctuation">,</span> <span class="token string">&quot;.$1&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">&quot;.&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">let</span> result <span class="token operator">=</span> source<span class="token punctuation">;</span>
  <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">const</span> p <span class="token keyword">of</span> paths<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    result <span class="token operator">=</span> <span class="token function">Object</span><span class="token punctuation">(</span>result<span class="token punctuation">)</span><span class="token punctuation">[</span>p<span class="token punctuation">]</span><span class="token punctuation">;</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>result<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> defaultValue<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
  <span class="token keyword">return</span> result<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h3 id="计算时区"><a href="#计算时区" class="header-anchor">#</a> 计算时区</h3> <p>迷迷糊糊</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 将一天24小时按每半小划分成48段，我们用一个位图表示选中的时间区间，</span>
<span class="token comment">// 例如`110000000000000000000000000000000000000000000000`，</span>
<span class="token comment">// 表示第一个半小时和第二个半小时被选中了，其余时间段都没有被选中，</span>
<span class="token comment">// 也就是对应00:00~01:00这个时间区间。一个位图中可能有多个不连续的</span>
<span class="token comment">// 时间区间被选中，例如`110010000000000000000000000000000000000000000000`，</span>
<span class="token comment">// 表示00:00-1:00和02:00-02:30这两个时间区间被选中了。</span>

<span class="token comment">// 要求：写一个函数timeBitmapToRanges，将上述规则描述的时间位图转换成一个选中时间区间的数组。</span>
<span class="token comment">// 示例输入：`&quot;110010000000000000000000000000000000000000000000&quot;`</span>
<span class="token comment">// 示例输出：`[&quot;00:00~01:00&quot;, &quot;02:00~02:30&quot;]`</span>
<span class="token keyword">function</span> <span class="token function">format</span><span class="token punctuation">(</span><span class="token parameter">start<span class="token punctuation">,</span> end</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">let</span> endHour <span class="token operator">=</span> <span class="token punctuation">(</span>end <span class="token operator">/</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toFixed</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">let</span> startHour <span class="token operator">=</span> <span class="token punctuation">(</span>start <span class="token operator">/</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toFixed</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">let</span> reg <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">(\d+)\.(\d+)</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">;</span>
  <span class="token keyword">const</span> endRes <span class="token operator">=</span> endHour<span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span>reg<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">const</span> startRes <span class="token operator">=</span> startHour<span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span>reg<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">return</span> <span class="token punctuation">(</span>
    <span class="token function">addZero</span><span class="token punctuation">(</span>startRes<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token operator">+</span>
    <span class="token string">&quot;:&quot;</span> <span class="token operator">+</span>
    <span class="token function">addZero</span><span class="token punctuation">(</span>startRes<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token operator">+</span>
    <span class="token string">&quot;~&quot;</span> <span class="token operator">+</span>
    <span class="token function">addZero</span><span class="token punctuation">(</span>endRes<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token operator">+</span>
    <span class="token string">&quot;:&quot;</span> <span class="token operator">+</span>
    <span class="token function">addZero</span><span class="token punctuation">(</span>endRes<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
  <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">function</span> <span class="token function">addZero</span><span class="token punctuation">(</span><span class="token parameter">num</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  num <span class="token operator">=</span> num <span class="token operator">===</span> <span class="token string">&quot;5&quot;</span> <span class="token operator">?</span> <span class="token string">&quot;30&quot;</span> <span class="token operator">:</span> num<span class="token punctuation">;</span>
  <span class="token keyword">return</span> num<span class="token punctuation">.</span>length <span class="token operator">&gt;</span> <span class="token number">1</span> <span class="token operator">?</span> num <span class="token operator">:</span> <span class="token string">&quot;0&quot;</span> <span class="token operator">+</span> num<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">function</span> <span class="token function">timeBitmapToRanges</span><span class="token punctuation">(</span><span class="token parameter">timeBitmap</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">let</span> timeArr <span class="token operator">=</span> timeBitmap<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">&quot;&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">v</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token operator">+</span>v<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">const</span> res <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
  <span class="token keyword">let</span> range <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token keyword">let</span> start <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
  <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;=</span> timeArr<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>timeArr<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      start<span class="token operator">++</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>timeArr<span class="token punctuation">[</span>i<span class="token punctuation">]</span> <span class="token operator">&amp;&amp;</span> timeArr<span class="token punctuation">[</span>i <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      range<span class="token punctuation">[</span>i<span class="token punctuation">]</span> <span class="token operator">=</span> start<span class="token punctuation">;</span>
      start <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
  <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> j <span class="token keyword">in</span> range<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    res<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token function">format</span><span class="token punctuation">(</span><span class="token function">parseInt</span><span class="token punctuation">(</span>j <span class="token operator">-</span> range<span class="token punctuation">[</span>j<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">parseInt</span><span class="token punctuation">(</span>j<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token keyword">return</span> res<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>
  <span class="token function">timeBitmapToRanges</span><span class="token punctuation">(</span><span class="token string">&quot;110010000000000000001110000000000000000000000111&quot;</span><span class="token punctuation">)</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// [ '00:00~01:00', '02:00~02:30', '10:00~11:30', '22:30~24:00' ]</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br></div></div><h3 id="实现-getvalue-函数来获取-path-对应的值"><a href="#实现-getvalue-函数来获取-path-对应的值" class="header-anchor">#</a> 实现 getValue 函数来获取 path 对应的值</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> object <span class="token operator">=</span> <span class="token punctuation">{</span> a<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> b<span class="token operator">:</span> <span class="token punctuation">{</span> c<span class="token operator">:</span> <span class="token number">3</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token comment">// path: 'a[0].b.c'</span>
<span class="token keyword">var</span> array <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> a<span class="token operator">:</span> <span class="token punctuation">{</span> b<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token comment">// path: '[0].a.b[0]'</span>

<span class="token keyword">function</span> <span class="token function">getValue</span><span class="token punctuation">(</span><span class="token parameter">target<span class="token punctuation">,</span> valuePath<span class="token punctuation">,</span> defaultValue</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">let</span> res <span class="token operator">=</span> <span class="token string">&quot;&quot;</span><span class="token punctuation">;</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token class-name">Object</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>target<span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token string">&quot;[object Object]&quot;</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">let</span> pathArr <span class="token operator">=</span> valuePath<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">&quot;.&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [a[0],b,c]</span>
    pathArr<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>item<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span><span class="token string">&quot;[&quot;</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">let</span> iItem <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
        item<span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">[0-9]</span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">$<span class="token number">0</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
          iItem <span class="token operator">=</span> $<span class="token number">0</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">let</span> key <span class="token operator">=</span> item<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">&quot;[&quot;</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
        res <span class="token operator">=</span> target<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">[</span>iItem<span class="token punctuation">]</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
        res <span class="token operator">=</span> res<span class="token punctuation">[</span>item<span class="token punctuation">]</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token comment">// 数组处理有点问题。后面再想想</span>
  <span class="token comment">// if(Array.isArray(target)) {</span>
  <span class="token comment">//     target.forEach(item =&gt; {</span>
  <span class="token comment">//         getValue(item)</span>
  <span class="token comment">//     })</span>
  <span class="token comment">// };</span>
  <span class="token keyword">return</span> res <span class="token operator">||</span> defaultValue<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">getValue</span><span class="token punctuation">(</span>object<span class="token punctuation">,</span> <span class="token string">&quot;a[0].b.c&quot;</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 输出3</span>
<span class="token comment">// console.log(getValue(array, '[0].a.b[0]', 12)); // 输出 1</span>
<span class="token comment">// console.log(getValue(array, '[0].a.b[0].c', 12));  // 输出 12</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br></div></div><h2 id="_2-4"><a href="#_2-4" class="header-anchor">#</a> 2.4</h2> <h3 id="提醒自己保持学习"><a href="#提醒自己保持学习" class="header-anchor">#</a> 提醒自己保持学习</h3> <h3 id="lodash-源码加入学习计划"><a href="#lodash-源码加入学习计划" class="header-anchor">#</a> lodash 源码加入学习计划</h3> <h3 id="天天开会太忙了-年后都安排满了-周六恶补一下"><a href="#天天开会太忙了-年后都安排满了-周六恶补一下" class="header-anchor">#</a> 天天开会太忙了，年后都安排满了，周六恶补一下</h3> <h3 id="实现-isequal-函数-思路"><a href="#实现-isequal-函数-思路" class="header-anchor">#</a> 实现 isEqual 函数 思路</h3> <p>要考虑的情况很多，可以参考 lodash 的实现</p> <ul><li>+0 -0 ，NaN， null undefined 都可以用 Object.is 判断</li> <li>对象 Object.prototype.toString.call === [object Object] 注意第二个 Object O 大写</li></ul> <p>只考虑对象和数组，基本就是递归的思想</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">isEqual</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// 只考虑对象，或者数组</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>areArrays<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    length <span class="token operator">=</span> a<span class="token punctuation">.</span>length<span class="token punctuation">;</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>length <span class="token operator">!==</span> b<span class="token punctuation">.</span>length<span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span>

    <span class="token keyword">while</span> <span class="token punctuation">(</span>length<span class="token operator">--</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token function">eq</span><span class="token punctuation">(</span>a<span class="token punctuation">[</span>length<span class="token punctuation">]</span><span class="token punctuation">,</span> b<span class="token punctuation">[</span>length<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
    <span class="token keyword">var</span> keys <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">,</span>
      key<span class="token punctuation">;</span>
    length <span class="token operator">=</span> keys<span class="token punctuation">.</span>length<span class="token punctuation">;</span>

    <span class="token keyword">if</span> <span class="token punctuation">(</span>Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>b<span class="token punctuation">)</span><span class="token punctuation">.</span>length <span class="token operator">!==</span> length<span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span>

    <span class="token keyword">while</span> <span class="token punctuation">(</span>length<span class="token operator">--</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      key <span class="token operator">=</span> keys<span class="token punctuation">[</span>length<span class="token punctuation">]</span><span class="token punctuation">;</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token punctuation">(</span>b<span class="token punctuation">.</span><span class="token function">hasOwnProperty</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span> <span class="token operator">&amp;&amp;</span> <span class="token function">eq</span><span class="token punctuation">(</span>a<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">,</span> b<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
  <span class="token keyword">return</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br></div></div><h2 id="_2-3"><a href="#_2-3" class="header-anchor">#</a> 2.3</h2> <h3 id="页面白屏-loading"><a href="#页面白屏-loading" class="header-anchor">#</a> 页面白屏 loading</h3> <p>spa 应用可以直接在容器里面写，当 vue、react 挂载阶段完成以后，会替换掉其中的内容，自动移除掉 loading 了。</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>app<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>loadding<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="vite-真的-nb-得系统学习一波-产出一篇文章试试"><a href="#vite-真的-nb-得系统学习一波-产出一篇文章试试" class="header-anchor">#</a> vite 真的 nb，得系统学习一波，产出一篇文章试试</h3> <h2 id="_2-2"><a href="#_2-2" class="header-anchor">#</a> 2.2</h2> <h3 id="reflect"><a href="#reflect" class="header-anchor">#</a> Reflect</h3> <p>Reflect 是一个内置的对象，它提供拦截 JavaScript 操作的方法。这些方法与 proxy handlers 的方法相同。Reflect 不是一个函数对象，因此它是不可构造的。</p> <p>Reflect 的所有属性和方法都是静态的，该对象提供了与 Proxy handler 对象相关的 13 个方法。这里只列举以下 5 个常用的方法：</p> <ul><li>Reflect.get(target, propertyKey[, receiver])：获取对象身上某个属性的值，类似于 target[name]。</li> <li>Reflect.set(target, propertyKey, value[, receiver])：将值赋值给属性的函数。返回一个布尔值，如果更新成功，则返回 true。</li> <li>Reflect.deleteProperty(target, propertyKey)：删除 target 对象的指定属性，相当于执行 delete target[name]。</li> <li>Reflect.has(target, propertyKey)：判断一个对象是否存在某个属性，和 in 运算符的功能完全相同。</li> <li>Reflect.ownKeys(target)：返回一个包含所有自身属性（不包含继承属性）的数组</li></ul> <h3 id="让文字的显示变为垂直方向"><a href="#让文字的显示变为垂直方向" class="header-anchor">#</a> 让文字的显示变为垂直方向</h3> <p>作用与父元素：<code>writing-mode: vertical-lr;</code> 注意兼容性</p> <h3 id="grid-垂直居中"><a href="#grid-垂直居中" class="header-anchor">#</a> grid 垂直居中</h3> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.wrapper</span> <span class="token punctuation">{</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
  <span class="token property">border</span><span class="token punctuation">:</span> 1px solid #ccc<span class="token punctuation">;</span>

  <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.wrapper &gt; p</span> <span class="token punctuation">{</span>
  <span class="token property">align-self</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
  <span class="token property">justify-self</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><h3 id="行内元素的-margin-和-padding"><a href="#行内元素的-margin-和-padding" class="header-anchor">#</a> 行内元素的 margin 和 padding</h3> <ul><li>水平方向：水平方向上，都有效；</li> <li>垂直方向：垂直方向上，都无效；（padding-top 和 padding-bottom 会显示出效果，但是高度不会撑开，不会对周围元素有影响）</li></ul> <h3 id="什么是-csp"><a href="#什么是-csp" class="header-anchor">#</a> 什么是 CSP？</h3> <ul><li>CSP（Content-Security-Policy）指的是内容安全策略，它的本质是建立一个白名单，告诉浏览器哪些外部资源可以加载和执行。我们只需要配置规则，如何拦截由浏览器自己来实现。</li> <li>通常有两种方式来开启 CSP，一种是设置 HTTP 首部中的 Content-Security-Policy，一种是设置 meta 标签的方式 <meta http-equiv="Content-Security-Policy"></li> <li>CSP 也是解决 XSS 攻击的一个强力手段。</li></ul> <h3 id="什么是尾调用"><a href="#什么是尾调用" class="header-anchor">#</a> 什么是尾调用？</h3> <p>尾调用指的是函数的最后一步调用另一个函数。我们代码执行是基于执行栈的，所以当我们在一个函数里调用另一个函数时，我们会保留当前的执行上下文，然后再新建另外一个执行上下文加入栈中。使用尾调用的话，因为已经是函数的最后一步，所以这个时候我们可以不必再保留当前的执行上下文，从而节省了内存，这就是尾调用优化。ES6 的尾调用优化只在严格模式下开启，正常模式是无效的。</p> <h3 id="打印背景-浏览器默认不勾选"><a href="#打印背景-浏览器默认不勾选" class="header-anchor">#</a> 打印背景，浏览器默认不勾选</h3> <h4 id="_1、css"><a href="#_1、css" class="header-anchor">#</a> 1、css</h4> <div class="language-js line-numbers-mode"><pre class="language-js"><code>@media print <span class="token punctuation">{</span>
     body<span class="token punctuation">{</span>
        <span class="token operator">-</span>webkit<span class="token operator">-</span>print<span class="token operator">-</span>color<span class="token operator">-</span>adjust<span class="token operator">:</span>exact<span class="token punctuation">;</span>
        <span class="token operator">-</span>moz<span class="token operator">-</span>print<span class="token operator">-</span>color<span class="token operator">-</span>adjust<span class="token operator">:</span>exact<span class="token punctuation">;</span>
        <span class="token operator">-</span>ms<span class="token operator">-</span>print<span class="token operator">-</span>color<span class="token operator">-</span>adjust<span class="token operator">:</span>exact<span class="token punctuation">;</span>
        print<span class="token operator">-</span>color<span class="token operator">-</span>adjust<span class="token operator">:</span>exact<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h3 id="_2、js-基本就是写背景图"><a href="#_2、js-基本就是写背景图" class="header-anchor">#</a> 2、js 基本就是写背景图</h3> <h3 id="apply-实现-bind"><a href="#apply-实现-bind" class="header-anchor">#</a> apply 实现 bind</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// bind没有立即执行函数</span>
<span class="token class-name">Function</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function-variable function">Mybind</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">context</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">let</span> _me <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">;</span>
  <span class="token keyword">return</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token function">_me</span><span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span>context<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h2 id="_2-1"><a href="#_2-1" class="header-anchor">#</a> 2.1</h2> <h3 id="react-hooks"><a href="#react-hooks" class="header-anchor">#</a> react hooks</h3> <ul><li>useState: 用来声明状态 state，修改值需要手动合并</li> <li>useEffect: 用来替换类组件中的生命周期函数，简化重复的操作</li> <li>useContext: 全局共享状态，解决祖先/子孙组件之间的传参问题</li> <li>useReducer: useState 的替换方案，将操作和更新解绑,配合 useContxet 可以实现简易 redux</li> <li>useCallback: 对函数进行缓存，优化性能</li> <li>useMemo: 对值进行缓存，优化性能</li> <li>useRef:获取 DOM 节点或组件实例， 保存变量</li></ul> <h3 id="vite"><a href="#vite" class="header-anchor">#</a> vite</h3> <ul><li><p>当浏览器识别 type=&quot;module&quot;引入 js 文件的时候，内部的 import 就会发起一个网络请求，尝试去获取这个文件</p></li> <li><p>vite 主要是是开发时做到了真正的动态加载，打包还是需要借助于 rollup</p></li></ul></div></div> <div class="page-edit"><div class="tags"><a href="/tags/?tag=%E5%AD%A6%E4%B9%A0%E6%89%93%E5%8D%A1" title="标签">#学习打卡</a></div> <div class="last-updated"><span class="prefix">最近更新时间：</span> <span class="time">2021/05/01 17:06:28</span></div></div> <div class="page-nav-wapper"><div class="page-nav-centre-wrap"><a href="/pages/ae21b75e82658/" class="page-nav-centre page-nav-centre-prev"><div class="tooltip">【打卡起点】1月完结</div></a> <a href="/pages/416517735bb6/" class="page-nav-centre page-nav-centre-next"><div class="tooltip">【新公司】3月完结</div></a></div> <div class="page-nav"><p class="inner"><span class="prev">
        ←
        <a href="/pages/ae21b75e82658/" class="prev">【打卡起点】1月完结</a></span> <span class="next"><a href="/pages/416517735bb6/">【新公司】3月完结</a>→
      </span></p></div></div></div> <div class="theme-vdoing-wrapper article-list bg-style-4"><div class="article-title"><a href="/archives/" class="fa fa-pencil-alt">
      最近更新
    </a></div> <div class="article-wrapper"><dl><dd>01</dd> <dt><div><a href="/pages/512f6ae339a31/"><div>【TypesScript主题月】5.7</div></a></div> <div class="date"><span>2021/05/06 00:00:00</span></div></dt></dl><dl><dd>02</dd> <dt><div><a href="/pages/136f8f068dffe/"><div>【React主题月】4月完结</div></a></div> <div class="date"><span>2021/04/30 00:00:00</span></div></dt></dl><dl><dd>03</dd> <dt><div><a href="/pages/55e7bb3eb7802/"><div>【算法打卡】先来一个波集合</div></a></div> <div class="date"><span>2021/04/22 00:00:00</span></div></dt></dl> <div class="more-box"><a href="/archives/" class="more"><i class="fas fa-angle-double-right"></i>前往更多 ...
      </a></div></div></div> <div class="comments-wrapper" style="display:none;"><!----></div></main></div> <div class="footer-wrapper" data-v-51417878 data-v-51417878><span class="footer-reco-theme" data-v-51417878><i class="iconfont reco-github" data-v-51417878></i> <a target="blank" href="https://github.com/alexwjj/alexwjj.github.io" data-v-51417878>alexwjj.github.io@5.0</a></span> <!----> <span class="footer-copyright" data-v-51417878><i class="iconfont reco-copyright" data-v-51417878></i> <a data-v-51417878><span data-v-51417878>俊劫</span> <span class="ml5" data-v-51417878>
          2018 - 2021
        </span></a></span> <span class="footer-view-site" data-v-51417878><i class="iconfont reco-eye" data-v-51417878></i> <span id="busuanzi_container_site_uv" data-v-51417878>
        访客数：<span id="busuanzi_value_site_uv" class="num" data-v-51417878>-</span></span> <span id="busuanzi_container_site_pv" class="ml5" data-v-51417878>
        访问量：<span id="busuanzi_value_site_pv" class="num" data-v-51417878>-</span></span></span> <!----></div> <!----></div></div><div class="global-ui"><div class="back-to-ceiling" style="right:1rem;bottom:6rem;width:2.5rem;height:2.5rem;border-radius:.25rem;line-height:2.5rem;display:none;" data-v-c6073ba8 data-v-c6073ba8><svg t="1574745035067" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5404" class="icon" data-v-c6073ba8><path d="M526.60727968 10.90185116a27.675 27.675 0 0 0-29.21455937 0c-131.36607665 82.28402758-218.69155461 228.01873535-218.69155402 394.07834331a462.20625001 462.20625001 0 0 0 5.36959153 69.94390903c1.00431239 6.55289093-0.34802892 13.13561351-3.76865779 18.80351572-32.63518765 54.11355614-51.75690182 118.55860487-51.7569018 187.94566865a371.06718723 371.06718723 0 0 0 11.50484808 91.98906777c6.53300375 25.50556257 41.68394495 28.14064038 52.69160883 4.22606766 17.37162448-37.73630017 42.14135425-72.50938081 72.80769204-103.21549295 2.18761121 3.04276886 4.15646224 6.24463696 6.40373557 9.22774369a1871.4375 1871.4375 0 0 0 140.04691725 5.34970492 1866.36093723 1866.36093723 0 0 0 140.04691723-5.34970492c2.24727335-2.98310674 4.21612437-6.18497483 6.3937923-9.2178004 30.66633723 30.70611158 55.4360664 65.4791928 72.80769147 103.21549355 11.00766384 23.91457269 46.15860503 21.27949489 52.69160879-4.22606768a371.15156223 371.15156223 0 0 0 11.514792-91.99901164c0-69.36717486-19.13165746-133.82216804-51.75690182-187.92578088-3.42062944-5.66790279-4.76302748-12.26056868-3.76865837-18.80351632a462.20625001 462.20625001 0 0 0 5.36959269-69.943909c-0.00994388-166.08943902-87.32547796-311.81420293-218.6915546-394.09823051zM605.93803103 357.87693858a93.93749974 93.93749974 0 1 1-187.89594924 6.1e-7 93.93749974 93.93749974 0 0 1 187.89594924-6.1e-7z" p-id="5405" data-v-c6073ba8></path><path d="M429.50777625 765.63860547C429.50777625 803.39355007 466.44236686 1000.39046097 512.00932183 1000.39046097c45.56695499 0 82.4922232-197.00623328 82.5015456-234.7518555 0-37.75494459-36.9345906-68.35043303-82.4922232-68.34111062-45.57627738-0.00932239-82.52019037 30.59548842-82.51086798 68.34111062z" p-id="5406" data-v-c6073ba8></path></svg></div><!----><div></div></div></div>
    <script src="/assets/js/app.070ad525.js" defer></script><script src="/assets/js/2.1d15da37.js" defer></script><script src="/assets/js/18.e48da6e4.js" defer></script><script src="/assets/js/4.aab0e518.js" defer></script>
  </body>
</html>
